// 资源文件
import './HotNewsList.scss'
import gg from '@/assets/gg.jpg'
// 组件
import { useState } from 'react'
import { Button, Image, message } from 'antd'
// 请求接口
import { login } from '@/api/user'
import { getResouceList } from '@/api/list'

function HotNewsList(props) {
    var list = props.list;
    var len = list.length;
    var html = [];
    for (var i = 0; i < len; i++) {
        html.push(<li key={i}>{list[i]}</li>)
    }

    const userInfo = async () => {
        const res = await login({
            username: 'admin'
        })
        console.log(res)
    }

    const [studyCommunityList, setStudyCommunityList] = useState([])
    const handelGetResouceList = async () => {
        const { data: { list } } = await getResouceList()
        setStudyCommunityList(list)
    }

    return <>
        <ul>{html}</ul>
        <div>
            <Image src={gg} width={100} alt="Vite logo" />
            <Button type="primary" onClick={userInfo}>Ant Design Button</Button>
        </div>
        <div className='card'>
            <div className='hd'>
                <div className='title'>资源列表</div>
                <div className='right'>
                    <Button type='primary' onClick={handelGetResouceList}>刷新</Button>
                </div>
            </div>
            <div className='list-box'>
                {
                    studyCommunityList.map((item, index) => {
                        return (
                            <div className='list-item' key={index}>
                                <div className='img-box'>
                                    <img src={item.logo} alt="" />
                                </div>
                                <div className='item-content'>
                                    <div className='title'>{item.title}</div>
                                    <div className='desc'>{item.desc}</div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    </>;
}
export {
    HotNewsList
}


